﻿@{
    ViewBag.Title = "MyLocations";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="@Url.Content("~/Scripts/Readings.js")" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA0YnZkQIddxpZ8AzgRDmb6wmVol8mOvks&sensor=true"></script>
<script type="text/javascript">
    var map;
    var dtReadings;
    var infoPainHtml;
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', { 'packages': ['corechart'] });

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(getAllReadingsForUser(onReadingsFetched));
    function onReadingsFetched(readings) {
        $(function () {
            //set divMap dimensions

            $("#divMap").width($(window).width() - $(window).width()*0.085);
            //document.getElementById("divMap").style.width = '100%';
            $("#divMap").height($(window).height() - $("#divHeader").height() - $(window).height() * 0.1);
            //document.getElementById("divMap").style.height = '100%';

            //initialize readings table
            dtReadings = new google.visualization.DataTable(eval(readings));

            //use the first reading to set map focus
            var firstPointLat = dtReadings.getValue(0, LATTITUDE_COL_INDEX);
            var firstPointLang = dtReadings.getValue(0, LONGITUDE_COL_INDEX);

            //set options
            var myOptions = {
                center: new google.maps.LatLng(firstPointLat, firstPointLang),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            //draw map
            map = new google.maps.Map(document.getElementById("divMap"), myOptions);

            //initialize markers
            initializeMarkers();
        });

    }
    function initializeMarkers() {
        for (var i = 0; i < dtReadings.getNumberOfRows(); i++) {
            var lati = dtReadings.getValue(i, LATTITUDE_COL_INDEX);
            var longi = dtReadings.getValue(i, LONGITUDE_COL_INDEX);
            var mileage = dtReadings.getValue(i, FUELEFFICIENCY_COL_INDEX);
            var cpm = dtReadings.getValue(i, COSTPERFUELUNIT_COL_INDEX);
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lati, longi),
                map: map,
                title: "MPG:" + mileage + " CPM:$" + cpm,
                infoContent: buildInfoPaneHTML(i)
            });
            //add listner for info pane
            google.maps.event.addListenerOnce(marker, 'click', openInfoWindow);
        }
    }
    function openInfoWindow() {
        var infoWindow = new google.maps.InfoWindow({
            content: this.infoContent
        });
        google.maps.event.addListener(infoWindow, 'closeclick', function () {
            google.maps.event.addListenerOnce(this.anchor, 'click', openInfoWindow);
        });
        infoWindow.open(map, this);
    }

    function buildInfoPaneHTML(index) {
        var retHTML = "<div style='font-family:Verdana;font-size:0.90em;color:black'>";
        retHTML = retHTML + "<b>Vehicle:</b> " + dtReadings.getValue(index, VEHICLENAME_COL_INDEX) + "<br/>";
        retHTML = retHTML + "<b>Date:</b> " + dtReadings.getValue(index, TIMESTAMP__COL_INDEX) + "<br/>";
        retHTML = retHTML + "<b>Miles per Gallon:</b> " + dtReadings.getValue(index, FUELEFFICIENCY_COL_INDEX) + "<br/>";
        retHTML = retHTML + "<b>Miles per Gallon:</b> $" + dtReadings.getValue(index, COSTPERFUELUNIT_COL_INDEX) + "<br/>";
        retHTML = retHTML + "</div>";
        return retHTML;
    }
</script>
@section Header {
   
    <div class="ui-grid-b" style="padding:1%" id="divHeader">
	    <div class="ui-block-a">@Html.ActionLink("Back", "Index/", "Home", null, new { data_icon = "arrow-l", data_rel = "back" , data_role="button"})</div>
	    <div class="ui-block-b"  style="text-align:center">@Html.ActionLink("Home", "Index/", "Home", null, new { data_icon = "home", data_iconpos = "notext", data_role = "button" })</div>
	    <div class="ui-block-c" style="text-align:right"> @Html.Partial("_LogOnPartial")</div>
    </div>
}


<h3>Touch the Markers to view stats:</h3>

<div id="divMap"  >

</div>
